$list-position: (
    absolute:absolute,
    static:static,
    sticky:sticky,
    relative:relative,
    fixed:fixed
);
$list-display: (
    inline:inline,
    inline-block:inline-block,
    block:block,
    inline-flex:inline-flex,
    flex:flex,
    inline-grid:inline-grid,
    grid:grid,
    inline-table:inline-table,
    table:table
);
$list-direction: (
    l:left,
    r:right,
    t:top,
    b:bottom,
    null:auto
);

/* 位置 */
@each $key,
$value in $list-position {
    .#{$key} {
        position: $value;
    }
}

/* 盒模型display */
@each $key,
$value in $list-display {
    .#{$key} {
        display: $value;
    }
}

/* 宽高 */
@for $var from 1 to 21 {
    .w-#{$var * 5} {
        width: $var *5%;
    }

    .h-#{$var * 5} {
        height: $var *5%;
    }
}

@for $var from 0 to 17 {


    .p-#{$var * 2} {
        padding: #{ $var * 2px} !important;
    }

    .py-#{$var * 2} {
        padding-top: #{ $var * 2px} !important;
        padding-bottom: #{ $var * 2px} !important;
    }

    .px-#{$var * 2} {
        padding-left: #{ $var * 2px} !important;
        padding-right: #{ $var * 2px} !important;
    }

    .pt-#{$var * 2} {
        padding-top: #{ $var * 2px} !important;
    }

    .pb-#{$var * 2} {
        padding-bottom: #{ $var * 2px} !important;
    }



    .pl-#{$var * 2} {
        padding-left: #{ $var * 2px} !important;
    }

    .pr-#{$var * 2} {
        padding-right:#{ $var * 2px} !important;
    }

    .m-#{$var * 2} {
        margin: #{ $var * 2px} !important;
    }

    /* margin */
    .mx-#{$var * 2} {
        margin-left: #{ $var * 2px} !important;
        margin-right: #{ $var * 2px} !important;
    }

    .my-#{$var * 2} {
        margin-top: #{ $var * 2px} !important;
        margin-bottom: #{ $var * 2px} !important;
    }

    .mt-#{$var * 2} {
        margin-top: #{$var * 2px} !important;
    }

    .mb-#{$var * 2} {
        margin-bottom: #{$var * 2px} !important;
    }

    .ml-#{$var * 2} {
        margin-left: #{$var * 2px} !important;
    }

    .mr-#{$var * 2} {
        margin-right: #{$var * 2px} !important;
    }
}



.overflow-hidden {
    overflow: hidden;
}